<template>
  <section class='flex new-article relative flex-wrap'>
    <ul class='flex-ul me'>
      <template v-for='item in list' :key='item.id'>
        <li :class='"fade-before fade-after format-"+item.postType'>
          <a :href='ArticlePath.Path+item.id' class='new-entry-post'>
            <img :src='item.articleCover' :alt='item.articleTitle'>
          </a>
          <time class="post-time" :datetime="item.createTime">{{ timeAgo(new Date(item.createTime)) }}</time>
          <a class="title line-clamp" :href='ArticlePath.Path+item.id' rel="bookmark">{{ item.articleTitle }}</a>
          <a class='summary line-clamp'>{{ item.articleAbstract }}</a>
          <div class="post-meta">
            <div class="post-mark">
              <span class="category">
                <a href="javascript:void(0);" rel="category tag">{{ item.categoryName }}</a>
              </span>
              <span class='tag-list'>
                <template v-for='tag in item.tags'>
                  <a rel='tag'>{{ tag.tagName }}</a>
                </template>
              </span>
            </div>
          </div>
        </li>
      </template>
    </ul>
  </section>
</template>

<script lang='ts'>
import { defineComponent } from 'vue'
import { timeAgo } from '@/utils/commonUtil'
import { ArticlePath } from '@/models/@types'

export default defineComponent({
  name: 'index',
  computed: {
    ArticlePath() {
      return ArticlePath
    }
  },
  methods: { timeAgo },
  props:['list']
})
</script>
